
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <base href="/">
  <meta charset="utf-8">
  <title>帐号设置</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="fly,layui,前端社区">
  <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
  <link rel="stylesheet" href="res/layui/css/layui.css">
  <link rel="stylesheet" href="res/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
  <div class="layui-container">
    <a class="fly-logo" href="/">
      <img th:src="${index[0].blogLogo}" alt="layui" width="200" height="40">
    </a>

    
    <ul class="layui-nav fly-nav-user">
      <!-- 登入后的状态 -->
      <div th:if="${users!=null}">
        <li class="layui-nav-item">
          <a class="fly-nav-avatar" href="javascript:;">
            <cite class="layui-hide-xs"><b th:text="${users.getUsername()}"></b></cite>
            <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i>
            <i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
            <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
          </a>
          <dl class="layui-nav-child">
            <dd><a href="user/userInfo"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
            <dd><a href="/"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
            <hr style="margin: 5px 0;">
            <dd><a href="javascript:;" id="logut" style="text-align: center;" >退出</a></dd>
          </dl>
        </li>
      </div>
    </ul>
  </div>
</div>

<div class="layui-container fly-marginTop fly-user-main">
  <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
    <li class="layui-nav-item">
      <a href="/">
        <i class="layui-icon">&#xe609;</i>
        我的主页
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="user/userindex">
        <i class="layui-icon">&#xe612;</i>
        用户中心
      </a>
    </li>
    <li class="layui-nav-item layui-this">
      <a href="user/userInfo">
        <i class="layui-icon">&#xe620;</i>
        基本设置
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="user/listUserBlog">
        <i class="layui-icon">&#xe60a;</i>
        文章管理
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="user/store">
        <i class="layui-icon">&#xe735;</i>
        VIP管理
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="user/order">
        <i class="layui-icon">&#xe63c;</i>
        订单管理
      </a>
    </li>
  </ul>

  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>
  
  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>


  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info">我的资料</li>
        <li lay-id="pass">密码</li>
        <li lay-id="bind">帐号绑定</li>
      </ul>
      <div class="layui-tab-content" style="padding: 20px 0;">
        <div class="layui-form-pane layui-form layui-tab-item layui-show">

            <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">用户名</label>
              <div class="layui-input-inline">
                <input type="text" id="L_username" name="username" required  autocomplete="off" th:value="${users.username}" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_nickname" class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="text" id="L_nickname"  name="nickname" th:value="${users.nickname}" lay-verify="nickname" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="radio" name="sex" value="男" title="男" th:checked="${users.sex == 1?'true':'false'}">
                <input type="radio" name="sex" value="女" title="女" th:checked="${users.sex == 0?'true':'false'}">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">头像</label>
              <div class="layui-input-inline">
                <input name="avatar" lay-verify="required" id="LAY_avatarSrc" placeholder="图片地址" th:value="${users.image}" class="layui-input">
              </div>
              <div class="layui-input-inline layui-btn-container" style="width: auto;">
                <button type="button" class="layui-btn layui-btn-primary test1" id="test1">
                  <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <button class="layui-btn layui-btn-primary" layadmin-event="avartatPreview">查看图片</button >
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_phone" class="layui-form-label">手机</label>
              <div class="layui-input-inline">
                <input type="text" id="L_phone" name="phone" th:value="${users.phone}" lay-verify="phone" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="text" id="L_email" name="email" th:value="${users.email}" lay-verify="email" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <button class="layui-btn" key="set-mine" lay-filter="submitUser" lay-submit>确认修改</button>
            </div>
          </div>
          <div class="layui-form layui-form-pane layui-tab-item">
              <div class="layui-form-item">
                <label for="L_oldPassword" class="layui-form-label">当前密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_oldPassword" name="oldPassword" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label for="L_newPassword" class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_newPassword" name="newPassword" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
              </div>
              <div class="layui-form-item">
                <label for="L_repassword" class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                  <input type="password" id="L_repassword" name="repassword" required lay-verify="required" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="setmypass">确认修改</button>
              </div>
          </div>

          <div class="layui-form layui-form-pane layui-tab-item">
            <ul class="app-bind">
              <li class="fly-msg app-havebind" th:if="${users.getAvailable()==1}">
                <i class="iconfont icon-qq"></i>
                <span>已成功绑定，您可以使用QQ帐号直接登录博客，当然，您也可以</span>
                <a href="login/jb" class="acc-unbind" type="qq_id" onclick="layer.msg('正在解绑QQ登录', {icon:16, shade: 0.1, time:0})">解除绑定</a>
              </li>
              <li class="fly-msg" th:if="${users.getAvailable()==0}">
                <i class="iconfont icon-qq"></i>
                <a href="login/qq" class="acc-weibo" type="qq_id"  onclick="layer.msg('正在绑定QQ登录', {icon:16, shade: 0.1, time:0})" >立即绑定</a>
                <span>，即可使用QQ帐号登录博客</span>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>

</div>

<footer th:replace="footer::header-fragment"></footer>
<script th:replace="footer::script-fragment"></script>
<script src="res/layui/layui.js"></script>
<script>
  layui.cache.page = 'user';
  layui.cache.user = {
    username: '游客'
    ,uid: -1
    ,avatar: 'res/images/avatar/00.jpg'
    ,experience: 83
    ,sex: '男'
  };
  layui.config({
    version: "3.0.0"
    ,base: 'res/mods/'
  }).extend({
    fly: 'index'
  }).use('fly');
  layui.config({
    base: 'layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'set','layer','upload'],function (){
    var $ = layui.$
            ,form = layui.form
            ,layer = layui.layer
            ,upload = layui.upload;

    //提交
    form.on('submit(submitUser)', function(obj){
      //获取表单参数
      var date = obj.field;
      var sex = date.sex == '男'?1:0;
      //请求接口
      $.post('user/updateInfo',{
        "username":date.username,
        "nickname":date.nickname,
        "sex":sex,
        "avatar":date.avatar,
        "phone":date.phone,
        "email":date.email
      },function (res){
        if (res.success){
          layer.msg('修改个人信息成功', {
            offset: '15px'
            ,icon: 1
            ,time: 1000
          });
        }else {
          layer.msg('修改个人信息失败', {
            offset: '15px'
            ,icon: 1
            ,time: 1000
          });
        }
      },'json');

      return false;
    });

    //提交
    form.on('submit(setmypass)', function(obj){
      //获取表单参数
      var date = obj.field;
      var oldPassword = date.oldPassword;
      //确认密码
      if(date.newPassword !== date.repassword){
        return layer.msg('两次密码输入不一致');
      }
      //请求接口
      $.post('user/updatePass',{
        "oldPassword":date.oldPassword,
        "newPassword":date.newPassword
      },function (res){
        if (res.code==200){
          layer.msg(res.msg, {
            offset: '15px'
            ,icon: 1
            ,time: 1000
          });
        }else {
          if (res.success){
            layer.msg('密码修改成功', {
              offset: '15px'
              ,icon: 1
              ,time: 1000
            });
            $("input[name='oldPassword']").val("");
            $("input[name='newPassword']").val("");
            $("input[name='repassword']").val("");
          }else {
            layer.msg('密码修改失败', {
              offset: '15px'
              ,icon: 1
              ,time: 1000
            });
          }
        }
      },'json');

      return false;
    });
    //执行实例
    var uploadInst = upload.render({
      elem: '#test1' //绑定元素
      ,url: 'admin/uploadPicture' //上传接口
      ,done: function(res){
        //如果上传失败
        if(res.code > 0){
          return layer.msg('上传失败');
        }
        $("#LAY_avatarSrc").val(res.data.src)
        //上传成功
        return layer.msg('上传成功');
      }
      ,error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
    });
  });
</script>
</body>
</html>